<template>
  <div class="app-container">
    <part-comp title="资源审核" class="mb_15"/>
    <el-form :model="queryParams" ref="queryForm" :inline="true" class="formbox whitebg mb_15">
        <el-form-item label="用户名:" prop="uid">
            <el-select v-model="queryParams.uid" size="small" clearable placeholder="用户名" @change="handleQuery" style="width:100px">
                <el-option
                    v-for="dict in userList"
                    :key="dict.id"
                    :label="dict.user_login"
                    :value="dict.id"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="地区：" prop="province">
            <el-select v-model="queryParams.province" clearable size="small" placeholder="省份" class='mr_6' @change="onselectCitys($event,1)" style="width:100px">
                <el-option
                    v-for="(dict,index) in province"
                    :key="index"
                    :label="dict.name"
                    :value="dict.name"
                ></el-option>
            </el-select>
            <el-select v-model="queryParams.city" clearable size="small" placeholder="城市" class='mr_6' @change="onselectCitys($event,2)" style="width:100px">
                <el-option
                    v-for="(dict,index) in citys"
                    :key="index"
                    :label="dict.name"
                    :value="dict.name"
                ></el-option>
            </el-select>
            <el-select v-model="queryParams.area" clearable size="small" filterable class='mr_6' placeholder="区县" @change="onselectCitys($event,3)" style="width:100px">
                <el-option
                    v-for="(dict,index) in region"
                    :key="index"
                    :label="dict.name"
                    :value="dict.name"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="主办方：" prop="co_sponsor">
            <el-input v-model="queryParams.co_sponsor" style="width:136px"
                placeholder="请输入主办方"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
            />
        </el-form-item>
        <el-form-item label="资源标题:" prop="biaoti">
            <el-input v-model="queryParams.biaoti" style="width:200px"
                placeholder="请输入资源标题"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
            />
        </el-form-item>
        <el-form-item label="公众号:" prop="gzh">
            <el-input v-model="queryParams.gzh" style="width:130px"
                placeholder="请输入公众号"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
            />
        </el-form-item>
        <el-form-item label="地区级别:" prop="level">
            <el-select v-model="queryParams.level" size="small" clearable placeholder="不限" @change="handleQuery" style="width:100px">
                <el-option
                    v-for="dict in levelList"
                    :key="dict.id"
                    :label="dict.value"
                    :value="dict.id"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="活动类型:" prop="class">
            <el-select v-model="queryParams.class" size="small" clearable placeholder="不限" @change="handleQuery" style="width:100px">
                <el-option
                    v-for="dict in classList"
                    :key="dict.id"
                    :label="dict.name"
                    :value="dict.id"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="申请时间:">
            <el-date-picker size="small"
                v-model="activeTimes"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="handleQuery">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
    </el-form>
    <div class="tablebox whitebg">
        <el-table v-loading="listLoading"
            :data="list"
            class="whitetable">
            <el-table-column label="序号" prop="id" >
                <template slot-scope="scope">
                    <span>{{(queryParams.page - 1) * queryParams.num + scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column label="用户名" prop="user_login" >
                <template slot-scope="scope">
                    <span class="">{{scope.row.resource?scope.row.resource.user_login:'-'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="公众号" prop="user_login" >
                <template slot-scope="scope">
                    <span class="">{{scope.row.author||'-   '}}</span>
                </template>
            </el-table-column>
            <el-table-column label="地区">
                <template slot-scope="scope">
                    <span >{{ scope.row.province?scope.row.province:'-' }}{{ scope.row.city?'-'+scope.row.city:''}}{{ scope.row.area?'-'+scope.row.area:'' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="地区级别">
                <template slot-scope="scope">
                    <span v-if="scope.row.his_saleObj">{{levelName(scope.row.active_level)||'-'}}</span>
                    <span v-else>{{levelName(scope.row.active_level)||'-'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="标题" width="200">
                <template slot-scope="scope">
                    <span >{{ scope.row.title}}</span>
                </template>
            </el-table-column>
            <el-table-column label="原始链接">
                <template slot-scope="scope">
                    <a class="comm_link" v-if="scope.row.url" :href="scope.row.url" target="_blank">点击跳转</a>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column label="活动链接">
                <template slot-scope="scope">
                    <a class="comm_link" v-if="scope.row.user_url" :href="scope.row.user_url" target="_blank">点击跳转</a>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column label="活动时间">
                <template slot-scope="scope">
                    <span v-if="!Array.isArray(scope.row.tp_arr)">{{ parseTime(scope.row.tp_arr.start,'{y}-{m}-{d}') }} - {{parseTime(scope.row.tp_arr.end,'{y}-{m}-{d}') }}</span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column label="活动提醒时间">
                <template slot-scope="scope">
                    <span>{{scope.row.remind_time=='1970-01-01'?'-':scope.row.remind_time}}</span>
                </template>
            </el-table-column>
            <el-table-column label="申请时间">
                <template slot-scope="scope">
                    <span>{{scope.row.create_time}}</span>
                </template>
            </el-table-column>
            <el-table-column label="活动类型">
                <template slot-scope="scope">
                    <span>{{scope.row.class_name}}</span>
                </template>
            </el-table-column>
             <el-table-column label="状态">
                <template slot-scope="scope">
                    <div><span class="primarydot"></span>{{scope.row.check_name}}</div>
                    <!-- <div v-else><span class="primarydot reddot"></span>未审批</div> -->
                </template>
            </el-table-column>
            
            <el-table-column label="活动票数">
                <template slot-scope="scope">
                    <span>{{scope.row.num}}</span>
                </template>
            </el-table-column>
            <el-table-column label="主办方">
                <template slot-scope="scope">
                    <span v-if="scope.row.cosponsor&&scope.row.cosponsor.length">
                        <span v-for="(item,index) in scope.row.cosponsor" :key="index">{{item.co_sponsor}},</span>
                    </span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column label="协办方">
                <template slot-scope="scope">
                    <span v-if="scope.row.sponsor">{{scope.row.sponsor.sponsor||'-'}}</span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column label="活动联系人">
                <template slot-scope="scope">
                    <span v-if="scope.row.contacts&&scope.row.contacts.length">{{scope.row.contacts[0].username}}</span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column label="联系方式">
                <template slot-scope="scope">
                    <span v-if="scope.row.contacts&&scope.row.contacts.length">{{scope.row.contacts[0].phone}}</span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column prop="created_at" label="操作"  fixed="right" width="100">
                <template slot-scope="scope">
                    <div class="flex btnflex">
                        <div class="commhover btn_textblue mb_10" @click="handleCheck(scope.row)">审核</div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.num"
            @pagination="getList"
            />
    </div>
  </div>
</template>

<script>
import PartComp from '@/components/PartComp';
// import ResDialog from './components/ResDialog.vue';
import { checklist } from '@/api/approval'
import { getCitys,getRegions } from '@/api/comm';
import {getPullNum, pullResource } from '@/api/resource';
import { levelList,levelName } from '@/api/datalist';
export default {
    components:{
        // ResDialog,
        PartComp
    },
    data(){
        return {
            queryParams:{
                page:1,
                num:10,
                province:'',
                city:'',
                area:'',
                co_sponsor:'',
                biaoti:'',
                gzh:"",
            },
            listLoading:false,
            list:[],
            total:0,
            userList:[],
            province:[],
            citys:[],
            region:[],
            classList:[],
            levelList:levelList,
            activeTimes:[],
            pull:{
                get:0,
                day:0
            },
            pullloading:false,
            editdialog:false,
            type:1,
            rowinfo:null,
        }
    },

    created(){
        // 活动类型
        this.getDicts('/check/task/activeclass').then(res=>{
            this.classList = res.data;
        });
        // 用户列表
        this.getDicts('/check/user/user').then(res=>{
            this.userList = res.data;
        });
        // 获取城市
        this.getProvince(1);
        this.getPullNum();
        this.getList();
    },

    computed: {

        levelName(){
            return levelName
        },
    },

    methods:{

        getPullNum(){
            getPullNum().then(res=>{
                this.pull=res.data;
            })
        },

        // 获取省份
        getProvince(type,params){
            if(type==1){ //省份
                this.getDicts('/check/index/province').then(res=>{
                    this.province = res.data;
                });
            }
            if(type==2){ //城市
                getCitys(params).then(res=>{
                    this.citys = res.data;
                    // this.getList();
                })
            }
            if(type==3){ //地区
                getRegions(params).then(res=>{
                    this.region = res.data;
                })
            }
        },

        // 城市选择
        onselectCitys(event,type){
            if(type == 1 && this.queryParams.province){
                // let index = this.province.indexOf(this.queryParams.province);
                let index = -1;
                this.province.forEach(item=>{
                    if(this.queryParams.province == item.name){
                        index = item.id
                    }
                });
                if(index>=0){
                    this.getProvince(2,{province_index:index});
                }
                this.queryParams.city='';
                this.queryParams.area='';
            }
            if(type == 2 && this.queryParams.city){
                this.queryParams.area='';
                let pindex = -1,cindex=-1;
                this.province.forEach(item=>{
                    if(this.queryParams.province == item.name){
                        pindex = item.id
                    }
                });
                this.citys.forEach(item=>{
                    if(this.queryParams.city == item.name){
                        cindex = item.id
                    }
                });
                this.getProvince(3,{province_index:pindex,city_index:cindex});
            }
            this.getList();
        },

        getList(){
            this.listLoading=true;
            let params = {
                page:this.queryParams.page,
                num:this.queryParams.num,
            }
            if(this.queryParams.uid){
                params.uid = this.queryParams.uid
            }
            if(this.queryParams.province){
                params.province = this.queryParams.province
            }
            if(this.queryParams.city){
                params.city = this.queryParams.city
            }
            if(this.queryParams.area){
                params.area = this.queryParams.area
            }
            if(this.activeTimes&&this.activeTimes.length){
                params.startime=this.activeTimes[0];
                params.endtime=this.activeTimes[1];
            }
            if(this.queryParams.biaoti){
                params.biaoti = this.queryParams.biaoti
            }
            if(this.queryParams.co_sponsor){
                params.co_sponsor = this.queryParams.co_sponsor
            }
            if(this.queryParams.level){
                params.level = this.queryParams.level
            }
            if(this.queryParams.class){
                params.class = this.queryParams.class
            }
            if(this.queryParams.gzh){
                params.gzh = this.queryParams.gzh
            }
            checklist(params).then(res=>{
                this.listLoading=false;
                this.list = res.data.list;
                this.total = res.data.count;
            }).catch(()=>{
                this.listLoading=false;
            })
        },

        handleQuery(){
            this.queryParams.page = 1;
            this.getList();
        },

        resetQuery(){
            this.resetForm("queryForm");
            this.queryParams.province='';
            this.queryParams.city='';
            this.queryParams.area='';
            this.activeTimes=[];
            this.handleQuery();
        },
        

        handleCheck(row){
            this.rowinfo = row;
            this.$router.push({name:'approvalmgtcheck',query:{id:row.id,type:1}});
        },
    }
}
</script>

<style lang="scss" scoped>
.formbox{
    border-radius: 5px;
    padding: 15px 15px 0 15px;
    .el-form-item{
        margin-bottom: 5px;
    }
}
.primarydot{
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  margin-right: 5px;
  background-color: #1168EB;
}
.reddot{
  background-color: #E63737;
}
.btnflex{
    .line{
        display: inline-block;
        margin:0 10px;
    }
}
</style>